import React from 'react'
import { Flex, Icon } from 'antd-mobile' // flex组件
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types' // props校验,增加代码的健壮性
import './index.css'

function SearchHeader ({ city, history, className }) {
  return (
          // 通过数组join方法，可以动态给元素设置样式，最后转化的结果就是 类名 空格隔开 
          // 之前直接给组件写className = 'dsa' 是作用不到组件身上的，我们通过父组件向子组件传值的方式，将类名传进来，然后子组件拿到后再将这个类名动态加到真的的className上
          <Flex className={['search-box', className || ''].join(' ')}>
          {/* 左侧白色区域 */}
          <Flex className="search">
              {/* 位置 */}
              <div className="location" onClick={_ => history.push('/cityLst')}>
                  <span className="name">{city}</span>
                  <i className="iconfont icon-arrow" />
              </div>

              {/* 搜索表单 */}
              <div className="form" onClick={_ => history.push('/serch')}>
                  <i className="iconfont icon-seach" />
                  <span className="text">请输入小区或地址</span>
              </div>
          </Flex>
          {/* 右侧地图图标 */}
          <i className="iconfont icon-map" onClick={_ => history.push('/map')}/>
      </Flex>
  )
    
}
SearchHeader.propTypes = { // 属性校验
  city :PropTypes.string.isRequired 
}
export default withRouter(SearchHeader)